<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>高德地图DEMO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="http://webapi.amap.com/maps?v=<?php echo (C("Amap_Version")); ?>&key=<?php echo (C("Amap_Web_Key")); ?>"></script>

	<script type="text/javascript" src="/electriccar/Public/jquery-2.1.4.js"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
		var mapObj;
		var markers=new Array();
		var mapObj = new AMap.Map("container", {
			resizeEnable: true,
			center: [108.947039, 34.259557],//默认钟楼
			zoom: 11
		});
		mapObj.clearMap();  //清除地图覆盖物

		getcarinfo();
		//获取地图当前中心点，N米范围内的所有电动车，并做点标记
		function getcarinfo(){
			var center=mapObj.getCenter();
			var lng=center.I;
			var lat=center.L;
			$.ajaxSetup({async:false});			
			$.getJSON("<?php echo U('demo/getcarinfo');?>&lng="+lng+"&lat="+lat+"&radius=1000&callback=?",function(data){
				//console.log(data);
				if(data.status>0){
					var info=data.datas;
					for(var i=0;i<data.status;i++){
						var current_position=info[i].current_position;
						var position=current_position.split(",");
						markers.push({
							icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+parseInt(i+1)+'.png',
							lng:position[0],
							lat:position[1],
							extData:info[i].id
						});
					}
					//console.log(markers);
					markers.forEach(function(marker) {
						var marker=new AMap.Marker({
							map: mapObj,
							icon: marker.icon,
							position: [marker.lng, marker.lat],
							extData: [marker.extData],
							offset: new AMap.Pixel(-12, -36)
						});
						//开始加载事件
						marker.on('click', function(e) {
							//console.log(e);
							var car_id=e.target.G.extData[0];
							var Lng=e.lnglat.getLng();
							var Lat=e.lnglat.getLat();
							var car_id=e.target.getExtData();
							alert("车辆id："+car_id);
							walking(car_id,Lng,Lat);
						});
					});
					mapObj.setFitView();//地图自适应视野
				}else{
					alert("附近暂无可租车辆");
				}
			});
		}

		function walking(car_id,Lng,Lat){
			mapObj.clearMap();  //清除地图覆盖物
			var center=mapObj.getCenter();
			//步行路线规划
			mapObj.plugin(["AMap.Walking"], function() {
				//步行导航
				var walking = new AMap.Walking({
					map: mapObj
				}); 
				//根据起终点坐标规划步行路线
				walking.search(center, [Lng, Lat]);
			});
		}
    </script>
</body>

</html>